<template>
  <div>
    <vue-json-editor v-model="prersonForm.data" :showBtns="true" :mode="'code'" lang="zh" :key="keys" @json-change="onJsonChange" @json-save="onJsonSave"/>
    <div v-pre class="json-content"></div>
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default {
  data() {
    return {
      prersonForm: {
        data: jsonData
      },
      keys: ''
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    onJsonChange(value) {
      console.log(value)
    },
    onJsonSave(value) {
      document.querySelector('.json-content').innerHTML = value
    }
  }
}
</script>

<style>
</style>
